<template>
  <view class="wallet-page">
    <!-- 余额区域 -->
    <view class="balance-section">
      <view class="balance-info">
        <view class="balance-label">{{ title }}</view>
        <view class="balance-amount"
          >{{ totalBalance }} <text class="unit">{{ unit }}</text></view
        >
      </view>
      <view class="withdraw-btn" @click="handleWithdrawal(type)">
        {{ convertible }}
        <uni-icons type="right" size="14" color="#303030" />
      </view>
    </view>

    <!-- 资产详情 -->
    <view class="asset-section">
      <view class="asset-title">资产详情</view>
      <view class="asset-list">
        <view class="asset-item" v-for="(item, idx) in balanceList" :key="idx">
          <view class="asset-left">
            <view class="asset-desc">{{ item.context }}</view>
            <view class="asset-date">{{ formatTime(item.time) }}</view>
          </view>
          <view class="asset-right"
            >{{ item.status == 0 ? "-" : "+" }}{{ item.money
            }}<text class="unit">{{ unit }}</text></view
          >
        </view>

        <!-- 加载提示 -->
        <view class="loading-more" v-if="loading"> 加载中... </view>
        <view class="empty-tip" v-if="!loading && balanceList.length === 0">
          暂无交易记录
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  data() {
    return {
      balanceList: [],
      currentPage: 1,
      loading: false,
      hasMore: true,
      totalBalance: "0",
      title: "",
      unit: "",
      convertible: "",
      type: "",
    };
  },
  onLoad(options) {
    this.type = options.type;
    if (options.type === "1") {
      this.title = "余额";
      this.unit = "元";
      this.convertible = "立即提现";
      this.getBalance();
      this.getTotalBalance();
    } else if (options.type === "0") {
      this.title = "爪币收益";
      this.unit = "爪币";
      this.convertible = "立即兑换";
      this.getPoints();
      this.getTotalPoints();
    }
  },
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.currentPage++;
      this.getBalance();
    }
  },
  methods: {
    // 格式化时间戳
    formatTime(timestamp) {
      if (!timestamp) return "";
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}.${month}.${day}`;
    },
    // 获取余额详情
    getBalance() {
      if (this.loading) return;
      this.loading = true;

      uni.app.post(
        "/api/cyBerBalance/bna",
        {
          uid: localStorage.getItem("userId"),
          limit: 10,
          offset: this.currentPage,
        },
        "json",
        "",
        (res) => {
          if (res.data && res.data.rows && res.data.rows.length > 0) {
            this.balanceList = [...this.balanceList, ...res.data.rows];
            if (this.balanceList.length >= res.data.total) {
              this.hasMore = false;
            }
          } else {
            this.hasMore = false;
          }
          this.loading = false;
        },
      );
    },
    // 获取积分详情
    getPoints() {
      uni.app.post(
        "/api/cyBerIntegral/bna",
        {
          uid: localStorage.getItem("userId"),
          limit: 10,
          offset: this.currentPage,
        },
        "json",
        "",
        (res) => {
          if (res.data && res.data.rows && res.data.rows.length > 0) {
            this.balanceList = [...this.balanceList, ...res.data.rows];
            if (this.balanceList.length >= res.data.total) {
              this.hasMore = false;
            }
          } else {
            this.hasMore = false;
          }
          this.loading = false;
        },
      );
    },
    // 获取总余额
    getTotalBalance() {
      uni.app.post(
        "/api/cyBerBalance/anb",
        {
          uid: localStorage.getItem("userId"),
        },
        "json",
        "",
        (res) => {
          this.totalBalance = res.data;
        },
      );
    },
    // 获取总积分
    getTotalPoints() {
      uni.app.post(
        "/api/cyBerIntegral/anb",
        {
          uid: localStorage.getItem("userId"),
        },
        "json",
        "",
        (res) => {
          this.totalBalance = res.data;
        },
      );
    },
    // 提现
    handleWithdrawal(type) {
      console.log(type);
      if (type === "0") {
        console.log("兑换");
      } else if (type === "1") {
        console.log("提现");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wallet-page {
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.balance-section {
  background: #d9f700;
  margin: 24rpx 24rpx 0 24rpx;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}

.balance-info {
  display: flex;
  flex-direction: column;
}

.balance-label {
  font-weight: 400;
  font-size: 24rpx;
  color: #707070;
  line-height: 40rpx;
  margin-bottom: 8rpx;
}

.balance-amount {
  font-weight: 600;
  font-size: 68rpx;
  color: #303030;
  line-height: 86rpx;

  .unit {
    font-size: 24rpx;
    color: #303030;
    line-height: 40rpx;
  }
}

.withdraw-btn {
  color: #303030;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 66rpx;
}

.asset-section {
  background: #fff;
  margin: 32rpx 24rpx 0 24rpx;
  border-radius: 16rpx;
  padding: 24rpx 0 0 0;
}

.asset-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  margin-left: 32rpx;
  margin-bottom: 16rpx;
}

.asset-list {
  padding: 0 32rpx 24rpx 32rpx;
}

.asset-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;

  &:last-child {
    border-bottom: none;
  }
}

.asset-left {
  display: flex;
  flex-direction: column;
}

.asset-desc {
  font-size: 28rpx;
  color: #444;
}

.asset-date {
  font-size: 22rpx;
  color: #bbb;
  margin-top: 6rpx;
}

.asset-right {
  font-size: 28rpx;
  color: #c69c6d;
  font-weight: bold;

  .unit {
    font-size: 22rpx;
    margin-left: 2rpx;
    color: #303030;
  }
}

.loading-more,
.no-more,
.empty-tip {
  text-align: center;
  padding: 20rpx 0;
  font-size: 24rpx;
  color: #999;
}

.empty-tip {
  padding: 60rpx 0;
}
</style>
